$(function(){
    
    var middleP2 = $('.middleP2')
    var m2box = $('.m2box ')
    var m2box1 = $('.m2box1 ')
    var m2yc = $('.m2yc')
    var m2yc2 = $('.m2yc2')
    var middle2 = $('.middle2')
    var middle3 = $('.middle3')
    var ppp = $('.ppp')
    // 切换页面
    middleP2.click(function(){
        middleP2.removeClass("mP2border")
        $(this).addClass('mP2border')
        if(this == middleP2[0]){
            middle3.css('display','none')
            middle2.css('display','block')
        }else if(this == middleP2[1]){
            middle2.css('display','none')
            middle3.css('display','block')
        }
    })
    //切换内容
    ppp.click(function(){
        ppp.css('color','#a9abab')
        $(this).css('color','black')
        if(this == ppp[0]){
            m2yc.css('display','none')
            $(m2yc[0]).css('display','block')
            m2yc2.css('display','none')
            $(m2yc2[0]).css('display','block')
        }else if(this == ppp[1]){
            m2yc.css('display','none')
            $(m2yc[1]).css('display','block')
            m2yc2.css('display','none')
            $(m2yc2[1]).css('display','block')
        }
    })

    // 获取试用大众内容
    $.get('http://localhost:3000/useing/public',function(val){
        console.log(val);
        for (var i = 0; i < 4; i++) {
            for (var ii = 0; ii < 4; ii++) {
                var content = $(
                    `<div class="cttbox1">
                    <div class="cttimg ">
                    <img  class="cttimg1" src=${val[ii].img} >
                    <p>首发</p>
                    </div>
                    <p class="cttP1">${val[ii].text}</p>
                    <p class="cttP2">2032</p>
                    <p class="cttP3">20台</p>
                    <p class="cttP4"><span>1392</span>申请</p>
                    <p class="cttP5">剩余时间2天</p>
                </div>`
                )
                var content1 = $(
                    `<div class="cttbox1">
                    <div class="cttimg ">
                    <img  class="cttimg1" src=${val[ii].img} >
                    <p>首发</p>
                    </div>
                    <p class="cttP1">${val[ii].text}</p>
                    <p class="cttP2 " id="cttPgreen">2032</p>
                    <p class="cttP3 " id="cttPgreen">20台</p>
                    <p class="cttP4"><span>1392</span>申请</p>
                    <p class="cttP5"><span style="color:green ;">查看试用名单</span></p>
                    </div>`
                )
                if(ii==1 ){
                    $(m2box[0]).append(content1)
                }else{
                    $(m2box[0]).append(content)
                }
            } 
            
        }
    })
    // 获取大众内容
    $.get('http://localhost:3000/guid/hot',function(val){
    console.log(val);
    // 循环添加内容
    for (var i = 0; i < 4; i++) {
        for (var ii = 4; ii < 8; ii++) {
            var content = $(
                `<div class="cttbox1">
                    <div class="cttimg ">
                    <img  class="cttimg1" src=${val[ii].img} >
                    <p>首发</p>
                    </div>
                    <p class="cttP1">${val[ii].text}</p>
                    <p class="cttP2">2032</p>
                    <p class="cttP3">20台</p>
                    <p class="cttP4"><span>1392</span>申请</p>
                    <p class="cttP5">剩余时间2天</p>
                </div>`
            )
            $(m2box[1]).append(content)
        }
    }
    })
    // 大众体验
    $.get('http://localhost:3000/useing/master',function(val){
        console.log(val);
        for (var i = 0; i < 4; i++) {
            for (var ii = 0; ii < 4; ii++) {
                var content = $(
                    `<div class="cttbox1">
                    <div class="cttimg ">
                    <img  class="cttimg1" src=${val[ii].img} >
                    <p class="cttimg2p1">体验师专享</p>
                    </div>
                    <p class="cttP1">${val[ii].text}</p>
                    <p class="cttP2">2032</p>
                    <p class="cttP3">20台</p>
                    <p class="cttP4"><span>1392</span>申请</p>
                    <p class="cttP5">剩余时间2天</p>
                </div>`
                )
                var content1 = $(
                    `<div class="cttbox1">
                    <div class="cttimg ">
                    <img  class="cttimg1" src=${val[ii].img} >
                    <p class="cttimg2p1">体验师专享</p>
                    </div>
                    <p class="cttP1">${val[ii].text}</p>
                    <p class="cttP2 " id="cttPgreen">2032</p>
                    <p class="cttP3 " id="cttPgreen">20台</p>
                    <p class="cttP4"><span>1392</span>申请</p>
                    <p class="cttP5"><span style="color:green ;">查看试用名单</span></p>
                    </div>`
                )
                if(ii==1 ){
                    $(m2box1[0]).append(content1)
                }else{
                    $(m2box1[0]).append(content)
                }
                
            }
        }
    })
    // 获取导购-最热内容
    $.get('http://localhost:3000/guid/hot',function(val){
    console.log(val);
    // 循环添加内容
    for (var i = 0; i < 4; i++) {
        for (var ii = 4; ii < 8; ii++) {
            var content = $(
                `<div class="cttbox1">
                <div class="cttimg ">
                <img  class="cttimg1" src=${val[ii].img} >
                <p class="cttimg2p1">体验师专享</p>
                </div>
                <p class="cttP1">${val[ii].text}</p>
                <p class="cttP2">2032</p>
                <p class="cttP3">20台</p>
                <p class="cttP4"><span>1392</span>申请</p>
                <p class="cttP5">剩余时间2天</p>
            </div>`
            )
            $(m2box1[1]).append(content)
        }
    }
    })


})
